@extends('admin.layouts.master')

@section('pagecss')
<link rel="stylesheet" type="text/css" href="/admin/assets/bootstrap-datepicker/css/datepicker.css" />
@endsection

@section('content')

<div class="row aw-list">
	<div class="col-lg-12">
		<section class="panel aw-content">
			<header class="panel-heading">@{{info.storefront_name}} - <h5 style="display: inline-block;">@{{info.type_text}} @{{info.number}}号场地 今日订场率：@{{info.percent}}%</h5></header>
			<div class="aw-mt20 aw-overflow-hidden">
				<div class="col-sm-12 col-md-6 form-group overflow-hidden">
					<input type="text" placeholder="请选择日期" class="form-control" id="time" name="time" v-model="form.time" :value="form.time">
				</div>
			</div>
			<ul class="aw-mt20 aw-overflow-hidden aw-field-time-list">
				<li class="col-sm-4 col-md-3 col-lg-2 aw-field-time-list-li" v-for="(list,key) in lists">
					<div class="aw-field-time-li" :class="Status_Class(list.status)">
						<p>@{{list.start_time}}-@{{list.end_time}}</p>
						<p>￥@{{list.price}}</p>
						<span>@{{Status_Text(list.status)}}</span>
						<button v-if="list.status==3" v-on:click="Field_UnLock(info.field_id,key)" type="submit" class="btn btn-666 btn-xs"><i class="icon-unlock"></i> 解锁</button>
						<button v-if="list.status==1" v-on:click="Field_Lock(info.field_id,key)" type="submit" class="btn btn-green btn-xs"><i class="icon-unlock-alt"></i> 锁定</button>
					</div>
				</li>
			</ul>
		</section>
	</div>
</div>

@section('pagejs')
@parent

<!--日期插件-->
<script type="text/javascript" src="/admin/js/ga.js"></script>
<script type="text/javascript" src="/admin/assets/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>

<script type="text/javascript">
var MJS_URLArry=URLArry;
var Get_form={
	page_id:23,time:DateToday()
}
$.extend(Get_form,MJS_URLArry);
var AD_info={
	api:'/adminapi/field/info',
	form_data:Get_form,
	tips:false,
}
var Ajax_Vue_Fun_Info=function(vue_data){
	vm=new Vue({
		el:'#Vue-Body',
		data:{
			lists:vue_data.list,
			info:vue_data.info,
			form:AD_info.form_data,
		},methods:{
			Status_Text:function(status){
				if(status==1){
					return '空位';
				}else if(status==2){
					return '已预定';
				}else if(status==3){
					return '锁定';
				}
			},Status_Class:function(status){
				if(status==1){
					return 'open';
				}else if(status==2){
					return 'reserve';
				}else if(status==3){
					return 'locking';
				}
			},Field_Search:function(){
				getData(AD_info,function(vue_data_list){
					vm.lists=vue_data_list.list;
				})
				URL_Make(this.form)
			},Field_UnLock:function(id,key){
				var form_data_lock={
					field_id:id,
					start_time:this.lists[key].start_time,
					day:this.form.time,
					action:1,
				}
				var AD_lock={
					api:'/adminapi/field/un-lock',
					form_data:form_data_lock,
					tips:'解锁'+' ['+this.form.time+' '+this.lists[key].start_time+'-'+this.lists[key].end_time+'] 场次成功',
				}
				postData(AD_lock,function(){
					vm.Field_Search()
				})
			},Field_Lock:function(id,key){
				var form_data_lock={
					field_id:id,
					rep_model:3,
					start_time:this.lists[key].start_time,
					lock_start_time:this.form.time,
					lock_end_time:this.form.time,
				}
				var AD_lock={
					api:'/adminapi/field/lock',
					form_data:form_data_lock,
					tips:'锁定'+' ['+this.form.time+' '+this.lists[key].start_time+'-'+this.lists[key].end_time+'] 场次成功',
				}
				postData(AD_lock,function(){
					vm.Field_Search()
				})
			}
		},watch:{
	        'form.time':function(val,oldval){
	            console.log('时间改变')
	            console.log(val,oldval)
	            this.Field_Search()
	        }
    	}	
	})
	$('#time').datepicker({
	    format: 'yyyy-mm-dd'
	}).on('changeDate',Select_Date);
	function Select_Date(ev){
		var This_day=ev.date.getFullYear().toString() + "-"+ (ev.date.getMonth()+1).toString()+ "-"+ ev.date.getDate().toString()
		vm.form.time=This_day;
		$('#time').val(This_day)
		$('#time').blur()
    }
    console.log('-----------vm')
    console.log(vm)
}


if(Get_form.id>0){
	getData(AD_info,Ajax_Vue_Fun_Info)
}else{
	location.href='/admin/field/list?page_id=23';
}
</script>
@endsection

@endsection

